<template>
	<nt-container bg-color="#F2F4F6">
		<view class="scan-code">
			<view class="scan-code-header"></view>
			<view class="scan-code-content">
				<view class="scan-code-content__line"></view>
				<view class="scan-code-content__circle"></view>
				<view class="scan-code-content__postion">{{ userInfo.level_name }}</view>
				<view class="scan-code-content__user">
					<view class="scan-code-content__user--name">{{ userInfo.username }}</view>
					<view class="scan-code-content__user--tel">{{ userInfo.mobile }}</view>
				</view>
				<view class="scan-code-content__desc" style="display:none;">电脑维修、打印机维修、复印机维修、</view>
				<view class="scan-code-content__desc" style="display:none;">回收手机电脑、监控安装</view>
				<view class="" style="color: blue;">
					<view class="" style="display: flex;">
						<view class="">{{ customername }}</view>
						<view class="">{{ customerphone }}</view>
					</view>
					<view class="">{{ address }}</view>
				</view>
				<view class="scan-code-content__qr">
					<view class="scan-code-content__qr--image">
						<nt-cdn-image :src="qrCode"></nt-cdn-image>
					</view>
					<view class="scan-code-content__qr--desc">请您用微信扫码确认工程师上门</view>
				</view>
			</view>
			<view class="scan-code-wechat">
				<view class="scan-code-wechat__label">关注微信公众号后，您可以：</view>
				<view class="scan-code-wechat__desc">1、实时查看订单维修详情</view>
				<view class="scan-code-wechat__desc">2、实时</view>
			</view>
			
			<view class="scan-code-tip">提示：请引导用户关注公众号，频繁跳过会影响您的绩效。</view>
			
			<view class="scan-code-footer">
				<view class="scan-code-footer__ignore" @tap="show = true">跳过</view>
				<view class="scan-code-footer__next" @tap="verifyCode(1)">下一步</view>
			</view>
			<u-modal
				:show="show"
				showCancelButton
				@confirm="confirmSkip"
				@cancel="show = false"
			>
				<view class="skip">
					<!-- <view class="skip-title">跳过备注</view> -->
					<u--textarea v-model="remarks" placeholder="请输入跳过扫码备注" height="120"></u--textarea>
				</view>
			</u-modal>
		</view>
	</nt-container>
</template>

<script>
import { verifyScanCode, getUserInfo } from "@/api"

export default {
	data(){
		return {
			loading: false,
			orderId: "",
			qrCode: "",
			customername: "",
			customerphone: "",
			address: "",
			userInfo: {},
			show: false,
			remarks: ""
		}
	},
	onLoad(options){
		this.orderId = options.id
		this.qrCode = options.qrCode
		this.customername = options.customername
		this.customerphone = options.customerphone
		this.address = options.address
		console.log(this.qrCode,'----')
		this.getMemberInfo()
	},
	methods: {
		verifyCode(v) {
			if(this.loading) return;
			this.loading = true;
			const parms = {
				realorder_id: this.orderId,
				funtype: v,
			}
			if(v === 0){
				parms.remarks = this.remarks
			}
			verifyScanCode(parms).then(res => {
				if(res.code === 1){
					this.rep(`/subpackage/order/pages/submit/recovery?id=${this.orderId}`)
				}
				this.loading = false
				this.show = false
			})
		},
		confirmSkip(){
			if(!this.remarks) return this.toast("请输入跳过扫码备注")
			this.verifyCode(0)
		},
		// 获取用户星系
		getMemberInfo(){
			getUserInfo("userCenter").then(res=> {
				console.log(res)
				this.userInfo = res.data;
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.scan-code{
	padding: 0 30rpx;
	box-sizing: border-box;
	&-header{
		height: 250rpx;
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background: var(--theme-color);
		border-bottom-left-radius: 100rpx;
		border-bottom-right-radius: 100rpx;
		
	}
	&-content{
		position: relative;
		z-index:9;
		background: #fff;
		padding: 75rpx 45rpx 20rpx;
		margin-top: 100rpx;
		border-radius: 30rpx;
		overflow: hidden;
		&::after, &::before{
			content: "";
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #F2F4F6;
			position: absolute;
			bottom: 580rpx;
		}
		&::before{
			left: -15rpx;
		}
		&::after{
			right: -15rpx;
		}
		&__circle{
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			background: #F6F5FA;
			position: absolute;
			right: 50rpx;
			top: 30rpx;
			z-index: -1;
		}
		&__line{
			height: 1rpx;
			border-bottom: 1rpx dashed #F2F4F6;
			bottom: 592rpx;
			position: absolute;
			left: 0;
			right: 0;
		}
		&__postion{
			min-width: 200rpx;
			background: #EBF1FF;
			color: var(--theme-color);
			font-size: 28rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			border-bottom-right-radius: 40rpx;
			position: absolute;
			left:0;
			top: 0;
			display:inline-block;
		}
		&__user{
			display:flex;
			align-items: flex-end;
			margin-bottom: 10rpx;
			&--name{
				font-size: 44rpx;
				font-weight: bold;
				margin-right: 10rpx;
			}
			&--tel{
				font-size: 28rpx;
				color: #999;
			}
		}	
		&__desc{
			font-size: 24rpx;
			color: #333;
			line-height: 1.5
		}
		&__qr{
			width: 540rpx;
			height: 540rpx;
			border: 14rpx solid #F8D4B9;
			border-radius: 20rpx;
			margin: 20rpx auto 0;
			padding-top: 35rpx;
			text-align: center;
			&--image{
				width: 400rpx;
				height: 400rpx;
				background: #f5f5f5;
				margin: auto
			}
			&--desc{
				margin-top: 40rpx;
				text-align:center;
				color: #666;
			}
		}
	}
	
	&-wechat{
		background:#fff;
		padding: 30rpx 50rpx;
		border-radius: 30rpx;
		color: #333;
		margin-top: 30rpx;
		&__label{
			font-size: 36rpx;
			font-weight: bold;
		}
		&__desc{
			font-size: 32rpx;
			margin-top: 15rpx;
		}
	}
	&-tip{
		font-size: 24rpx;
		color: #bbb;
		text-align: center;
		margin-top: 20rpx;
	}
	
	&-footer{
		height: 130rpx;
		line-height: 130rpx;
		display:flex;
		align-items: center;
		text-align: center;
		font-size: 36rpx;
		position: fixed;
		bottom: 0;
		left:0;
		right: 0;
		font-weight: bold;
		&__ignore{
			background: #fff;
			height: 100%;
			color: var(--theme-color);
			width: 225rpx;
		}
		&__next{
			background: var(--theme-color);
			color:#fff;
			height: 100%;
			flex: 1;
		}
	}
	
	.skip{
		width: 100%;
		&-title{
			font-size: 30rpx;
			margin-bottom: 20rpx;
		}
		/deep/.u-textarea{
			border: none !important;
			background:#f5f5f5;
		}
	}
}
</style>